<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layarea</title>
    <link rel="stylesheet" href="../../../component/layui/css/layui.css">
	<style>
		body{
			margin: 10px;
			background-color: whitesmoke;
		}
	</style>
</head>
<body>
	<div class="layui-card">
		<div class="layui-card-header"></div>
		<div class="layui-card-body">
		   <div class="layui-form">
		       <div class="layui-form-item" id="area-picker">
		           <div class="layui-form-label">网点地址</div>
		           <div class="layui-input-inline" style="width: 200px;">
		               <select name="province" class="province-selector" data-value="广东省" lay-filter="province-1">
		                   <option value="">请选择省</option>
		               </select>
		           </div>
		           <div class="layui-input-inline" style="width: 200px;">
		               <select name="city" class="city-selector" data-value="深圳市" lay-filter="city-1">
		                   <option value="">请选择市</option>
		               </select>
		           </div>
		           <div class="layui-input-inline" style="width: 200px;">
		               <select name="county" class="county-selector" data-value="龙岗区" lay-filter="county-1">
		                   <option value="">请选择区</option>
		               </select>
		           </div>
		       </div>
		   </div>	
		</div>
	</div>
    
    <script src="../../../component/layui/layui.js"></script>
    <script>
       
        layui.use(['layer', 'form', 'pearArea'], function () {
            var layer = layui.layer
                , form = layui.form
                , pearArea = layui.pearArea;

            pearArea.render({
                elem: '#area-picker',
                change: function (res) {
                    //选择结果
                    console.log(res);
                }
            });
        });
    </script>
</body>

</html>